diff --git a/web/assets.js b/web/assets.js
index bacee5f5f..0c78e8af4 100644
--- a/web/assets.js
+++ b/web/assets.js
@@ -1,23 +1,31 @@
 // @flow
 
 export const assetCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net';
 
 // Background Illustration
-export const backgroundIllustrationFileName = 'background-illustration.svg';
-export const backgroundIllustrationHeight = '100px';
-export const backgroundIllustrationWidth = '133px';
+export const backgroundIllustrationAsset = {
+  fileName: 'background-illustration.svg',
+  height: '100px',
+  width: '133px',
+};
 
 // Notifications Modal Illustration: "Focused"
-export const focusedNotificationsIllustrationFileName = 'all-notifs.svg';
-export const focusedNotificationsIllustrationHeight = '86px';
-export const focusedNotificationsIllustrationWidth = '46px';
+export const focusedNotificationsIllustrationAsset = {
+  fileName: 'all-notifs.svg',
+  height: '86px',
+  width: '46px',
+};
 
 // Notifications Modal Illustration: "Focused (badge only)"
-export const badgeOnlyNotificationsIllustrationFileName = 'badge-notifs.svg';
-export const badgeOnlyNotificationsIllustrationHeight = '86px';
-export const badgeOnlyNotificationsIllustrationWidth = '46px';
+export const badgeOnlyNotificationsIllustrationAsset = {
+  fileName: 'badge-notifs.svg',
+  height: '86px',
+  width: '46px',
+};
 
 // Notifications Modal Illustration: "Background"
-export const backgroundNotificationsIllustrationFileName = 'muted-notifs.svg';
-export const backgroundNotificationsIllustrationHeight = '86px';
-export const backgroundNotificationsIllustrationWidth = '46px';
+export const backgroundNotificationsIllustrationAsset = {
+  fileName: 'muted-notifs.svg',
+  height: '86px',
+  width: '46px',
+};
diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js
index 33954d862..251bdac2f 100644
--- a/web/chat/chat-thread-list.react.js
+++ b/web/chat/chat-thread-list.react.js
@@ -1,68 +1,63 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { emptyItemText } from 'lib/shared/thread-utils';
 
-import {
-  assetCacheURLPrefix,
-  backgroundIllustrationFileName,
-  backgroundIllustrationHeight,
-  backgroundIllustrationWidth,
-} from '../assets';
+import { assetCacheURLPrefix, backgroundIllustrationAsset } from '../assets';
 import Search from '../components/search.react';
 import ChatThreadListItem from './chat-thread-list-item.react';
 import css from './chat-thread-list.css';
 import { ThreadListContext } from './thread-list-provider';
 
 function ChatThreadList(): React.Node {
   const threadListContext = React.useContext(ThreadListContext);
   invariant(
     threadListContext,
     'threadListContext should be set in ChatThreadList',
   );
   const {
     activeTab,
     threadList,
     setSearchText,
     searchText,
   } = threadListContext;
   const isBackground = activeTab === 'Background';
 
   const threadComponents: React.Node[] = React.useMemo(() => {
     const threads = threadList.map(item => (
       <ChatThreadListItem item={item} key={item.threadInfo.id} />
     ));
     if (threads.length === 0 && isBackground) {
       threads.push(<EmptyItem key="emptyItem" />);
     }
     return threads;
   }, [threadList, isBackground]);
 
   return (
     <div className={css.threadListContainer}>
       <Search
         onChangeText={setSearchText}
         searchText={searchText}
         placeholder="Search threads"
       />
       <div>{threadComponents}</div>
     </div>
   );
 }
 
 function EmptyItem() {
   return (
     <div className={css.emptyItemContainer}>
       <img
-        src={`${assetCacheURLPrefix}/${backgroundIllustrationFileName}`}
-        height={backgroundIllustrationHeight}
-        width={backgroundIllustrationWidth}
+        src={`${assetCacheURLPrefix}/${backgroundIllustrationAsset.fileName}`}
+        height={backgroundIllustrationAsset.height}
+        width={backgroundIllustrationAsset.width}
       />
       <div className={css.emptyItemText}>{emptyItemText}</div>
     </div>
   );
 }
 
 export default ChatThreadList;
diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js
index e90e7a48b..94c21841d 100644
--- a/web/modals/threads/notifications/notifications-modal.react.js
+++ b/web/modals/threads/notifications/notifications-modal.react.js
@@ -1,192 +1,186 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   updateSubscription,
   updateSubscriptionActionTypes,
 } from 'lib/actions/user-actions';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import {
   assetCacheURLPrefix,
-  backgroundNotificationsIllustrationFileName,
-  backgroundNotificationsIllustrationHeight,
-  backgroundNotificationsIllustrationWidth,
-  badgeOnlyNotificationsIllustrationFileName,
-  badgeOnlyNotificationsIllustrationHeight,
-  badgeOnlyNotificationsIllustrationWidth,
-  focusedNotificationsIllustrationFileName,
-  focusedNotificationsIllustrationHeight,
-  focusedNotificationsIllustrationWidth,
+  focusedNotificationsIllustrationAsset,
+  badgeOnlyNotificationsIllustrationAsset,
+  backgroundNotificationsIllustrationAsset,
 } from '../../../assets.js';
 import Button from '../../../components/button.react';
 import EnumSettingsOption from '../../../components/enum-settings-option.react';
 import { useSelector } from '../../../redux/redux-utils';
 import Modal from '../../modal.react';
 import css from './notifications-modal.css';
 
 type NotificationSettings = 'focused' | 'badge-only' | 'background';
 
 type Props = {
   +threadID: string,
   +onClose: () => void,
 };
 
 function NotificationsModal(props: Props): React.Node {
   const { onClose, threadID } = props;
   const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
   const { subscription } = threadInfo.currentUser;
 
   const initialThreadSetting = React.useMemo<NotificationSettings>(() => {
     if (!subscription.home) {
       return 'background';
     }
     if (!subscription.pushNotifs) {
       return 'badge-only';
     }
     return 'focused';
   }, [subscription.home, subscription.pushNotifs]);
 
   const [
     notificationSettings,
     setNotificationSettings,
   ] = React.useState<NotificationSettings>(initialThreadSetting);
 
   const onFocusedSelected = React.useCallback(
     () => setNotificationSettings('focused'),
     [],
   );
   const onBadgeOnlySelected = React.useCallback(
     () => setNotificationSettings('badge-only'),
     [],
   );
   const onBackgroundSelected = React.useCallback(
     () => setNotificationSettings('background'),
     [],
   );
 
   const isFocusedSelected = notificationSettings === 'focused';
   const focusedItem = React.useMemo(() => {
     const statements = [
       { statement: 'Banner notifs', isStatementValid: true },
       { statement: 'Badge count', isStatementValid: true },
       { statement: 'Lives in Focused tab', isStatementValid: true },
     ];
     const icon = (
       <img
-        src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationFileName}`}
-        height={focusedNotificationsIllustrationHeight}
-        width={focusedNotificationsIllustrationWidth}
+        src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`}
+        height={focusedNotificationsIllustrationAsset.height}
+        width={focusedNotificationsIllustrationAsset.width}
       />
     );
     return (
       <EnumSettingsOption
         selected={isFocusedSelected}
         title="Focused (enabled)"
         statements={statements}
         icon={icon}
         onSelect={onFocusedSelected}
       />
     );
   }, [isFocusedSelected, onFocusedSelected]);
 
   const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only';
   const focusedBadgeOnlyItem = React.useMemo(() => {
     const statements = [
       { statement: 'Banner notifs', isStatementValid: false },
       { statement: 'Badge count', isStatementValid: true },
       { statement: 'Lives in Focused tab', isStatementValid: true },
     ];
     const icon = (
       <img
-        src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationFileName}`}
-        height={badgeOnlyNotificationsIllustrationHeight}
-        width={badgeOnlyNotificationsIllustrationWidth}
+        src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`}
+        height={badgeOnlyNotificationsIllustrationAsset.height}
+        width={badgeOnlyNotificationsIllustrationAsset.width}
       />
     );
     return (
       <EnumSettingsOption
         selected={isFocusedBadgeOnlySelected}
         title="Focused (badge only)"
         statements={statements}
         icon={icon}
         onSelect={onBadgeOnlySelected}
       />
     );
   }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]);
 
   const isBackgroundSelected = notificationSettings === 'background';
   const backgroundItem = React.useMemo(() => {
     const statements = [
       { statement: 'Banner notifs', isStatementValid: false },
       { statement: 'Badge count', isStatementValid: false },
       { statement: 'Lives in Background tab', isStatementValid: true },
     ];
     const icon = (
       <img
-        src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationFileName}`}
-        height={backgroundNotificationsIllustrationHeight}
-        width={backgroundNotificationsIllustrationWidth}
+        src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`}
+        height={backgroundNotificationsIllustrationAsset.height}
+        width={backgroundNotificationsIllustrationAsset.width}
       />
     );
     return (
       <EnumSettingsOption
         selected={isBackgroundSelected}
         title="Background"
         statements={statements}
         icon={icon}
         onSelect={onBackgroundSelected}
       />
     );
   }, [isBackgroundSelected, onBackgroundSelected]);
 
   const dispatchActionPromise = useDispatchActionPromise();
 
   const callUpdateSubscription = useServerCall(updateSubscription);
 
   const onClickSave = React.useCallback(() => {
     dispatchActionPromise(
       updateSubscriptionActionTypes,
       callUpdateSubscription({
         threadID: threadID,
         updatedFields: {
           home: notificationSettings !== 'background',
           pushNotifs: notificationSettings === 'focused',
         },
       }),
     );
     onClose();
   }, [
     callUpdateSubscription,
     dispatchActionPromise,
     notificationSettings,
     onClose,
     threadID,
   ]);
 
   return (
     <Modal name="Channel notifications" size="fit-content" onClose={onClose}>
       <div className={css.container}>
         <div className={css.optionsContainer}>
           {focusedItem}
           {focusedBadgeOnlyItem}
           {backgroundItem}
         </div>
         <Button
           type="primary"
           onClick={onClickSave}
           disabled={notificationSettings === initialThreadSetting}
         >
           Save
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default NotificationsModal;